<template>
  <div style="padding: 16px">
    <el-button>添加项目</el-button>
    <el-button @click="back">返回</el-button>
    <el-row :gutter="16">
      <el-col
          v-for="(item, index) in selectedProjects"
          :key="index"
          :xs="24" :sm="12" :md="8" :lg="6"
      >
        <el-card
            class="project-card"
            shadow="hover"

        >
          <template #header>
            <div @click="toProcess(item)" :class="[item.confirm === 2?'disabled-item':'enabled-item' ]">
              <span>{{ item.name }}</span>
            </div>
          </template>
          <div>
            {{ item.description || '项目详情' }}
          </div>

          <template #footer>
            <div>
              <el-tag type="success" v-if="item.confirm === 1">已确认</el-tag>
              <el-tag type="warning" v-else-if="item.confirm === 0">待确认</el-tag>
              <el-tag type="danger" v-else-if="item.confirm === 2">
                <el-tooltip trigger="hover" content="123">
                  <template #content>{{ item?.reject}}</template>
                  已驳回
                </el-tooltip>
              </el-tag>
            </div>
          </template>
        </el-card>


      </el-col>
    </el-row>

  </div>


</template>

<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {useRouter, useRoute} from 'vue-router'
import {ElMessage} from "element-plus";

const router = useRouter()
const route = useRoute()

const userData = ref()


onMounted(() => {
  console.log(route)
  console.log(route.params.id)
})

const back = () => {
  router.back()
}

const toProcess = (item: any) => {
  if (item.confirm === 0) {
    ElMessage.warning("项目未确认")
    return
  }
  router.push({
    path: '/tabs',
    query: {
      selectedProjectId: '25535'
    },
  })
}

const selectedProjects = ref([
  {
    name: '金融项目',
    confirm: 1,
    description: '项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述'
  },
  {
    name: '数学项目',
    confirm: 0,
    description: '项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述'
  },
  {
    name: '环境项目',
    confirm: 2,
    description: '项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述',
    reject: '驳回原因驳回原因驳回原因驳回原因驳回原'
  },
  {
    name: '哲学项目',
    confirm: 1,
    description: '项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述'
  },
  {
    name: '哲学项目',
    confirm: 1,
    description: '项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述'
  },
  {
    name: '哲学项目',
    confirm: 1,
    description: '项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述'
  },
  {
    name: '哲学项目',
    confirm: 1,
    description: '项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述项目描述'
  }
])


</script>

<style scoped>
.project-card {
  margin-bottom: 16px;
}

.disabled-item {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none; /* 禁用鼠标事件 */
}

.enabled-item {
  cursor: pointer;
  /* 其他启用样式 */
}
</style>